<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.css">
    <script src="/JS/jquery/jquery-3.3.1.js"></script>
    <script src="/bootstrap/dist/js/bootstrap.js"></script>
    <title>用户列表</title>
</head>
<body>

    <table class="table table-striped table-bordered table-condensed">
        <h2>用户列表</h2>
        <thead>
        <tr align="center">
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
            <th>性别</th>
        </tr>
        </thead>
        <tbody>
        <tr  th:each="user:${users}" align="center" onclick="oncli(this)" onmouseover="onOver(this)" onmouseout="onOut(this)">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
            <td th:text="${user.address}"></td>
            <td th:switch="${user.male}">
                <span th:case="1">男</span>
                <span th:case="0">女</span>
                <span th:case="*">未知</span>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div id="body_all">
    <div id="body_all_top" style="color: blue;font-size: 26px">
        <marquee direction="left" scrolldelay="80"  onmouseover=this.stop() onmouseout=this.start()>
            中国高速铁路简介:目前在中国，动车有CRH1、CRH2、CRH3、CHR5、CRH6、CRH380等不同型号，中文名是和谐号，英文名是CRH，就是“中国高速铁路”(China Railways Highspeed)的简称。
        </marquee>
    </div>
    <div id="body_all_bottom" align="center" > <img id="img" src="/images/001.jpg" style="width:100%;height:auto;" /> </div>
</div>

<script type="text/javascript">
    $(function() {
        showImg();
    });


    function oncli(data) {
        if(!data.style.backgroundColor) {
            data.style.backgroundColor="red"
            return;
        }

        if(data.style.backgroundColor == "gray") {
            //data.style.backgroundColor=""
            data.style.backgroundColor="red"
            return;
        }

        if(data.style.backgroundColor == "red") {
            //data.style.backgroundColor=""
            data.style.backgroundColor=""
            return;
        }
    }

    function onOver(data) {
        if(data.style.backgroundColor && data.style.backgroundColor == "red") {
            //data.style.backgroundColor=""
            return;
        }
        data.style.backgroundColor="gray";//更改偶数行的背景颜色
    }

    function onOut(data) {
        if(data.style.backgroundColor && data.style.backgroundColor == "gray") {
            data.style.backgroundColor=""
            return;
        }
    }

    function showImg () {
        <!-- 图片切换脚本  -->
        var curIndex=0;
        //时间间隔(单位毫秒)，2秒钟显示一张，数组共有5张图片放在images文件夹下。
        var timeInterval=2000;
        var arr=new Array();
        arr[0]="/images/001.jpg";
        arr[1]="/images/002.jpg";
        arr[2]="/images/003.jpg";
        arr[3]="/images/004.jpg";
        arr[4]="/images/005.jpg";
        setInterval(changeImg,timeInterval);
        function changeImg()
        {
            var obj=document.getElementById("img");
            if (curIndex==arr.length-1)
            {
                curIndex=0;
            }
            else
            {
                curIndex+=1;
            }
            obj.src=arr[curIndex];
        }
    }
</script>
</body>
</html>